<template>
  <view>
    <view class="authorize_box">
      <view class="ar_box">
        <view class="ar_word">
          <view class="ar_tit">温馨提示</view>
          <view class="ar_cont">请授权以便您更好的体验此小程序</view>
        </view>
        <view class="ar_butt_box">
          <view class="ar_butt_item">
            确定
            <button
              open-type="getUserInfo"
              @getuserinfo="onGotUserInfo"
            ></button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      id: "",
    };
  },
  onLoad() {},
  methods: {
    onGotUserInfo(e) {
      if (e.detail.errMsg === "getUserInfo:fail auth deny")
        return uni.$showMsg("您取消了授权！");

      this.getToken(e.detail);
    },
    async getToken(info) {
      const [err, res] = await uni.login().catch((err) => err);
      if (err || res.errMsg !== "login:ok") return uni.$showMsg("登录失败！");

      uni.setStorageSync("info", info.userInfo);
      console.log("fid >>", uni.getStorageSync("fid"));
      const data = await this.$u.post("api/set/wx_login", {
        code: res.code,
        id: uni.getStorageSync("fid"),
      });

      const data1 = await this.$u.post("api/set/user_info", {
        info: info.userInfo,
        openID: data.data,
      });

      if (!data1.code) return uni.$showMsg("登录失败");
      uni.setStorageSync("uid", data1.data);

      // reLaunch 重新启动
      uni.reLaunch({
        url: "../index/index",
      });
      uni.$showMsg("用户登录成功！");
    },
  },
};
</script>

<style lang="scss">
.authorize_box {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
}
.ar_box {
  width: 80%;
  height: 300rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: calc((100vh - 300rpx) / 2) 10%;
}
.ar_word {
  height: 200rpx;
  width: 100%;
  overflow: hidden;
}
.ar_tit {
  height: 60rpx;
  width: 100%;
  text-align: center;
  line-height: 60rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
}
.ar_cont {
  height: 80rpx;
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  color: #999;
}
.ar_butt_box {
  display: flex;
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  border-top: 2rpx solid #dcdcdc;
}
.ar_butt_item {
  flex: 1;
  height: 100%;
  line-height: 100rpx;
  text-align: center;
  position: relative;
  font-size: 32rpx;
  color: #576b95;
}
.ar_line {
  box-sizing: border-box;
  border-right: 2rpx solid #dcdcdc;
  color: #333;
}
.ar_butt_item button {
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
